<template>
    <div class="">
        <el-card class="box-card font-left">
            <div slot="header" class="clearfix">
                <span class="font-left">CMS管理员登录</span>
            </div>
            <el-form ref="form" :model="form" label-width="80px" :rules="rules" >
                <el-form-item label="登录账号" prop="count">
                    <el-input v-model="form.count"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="password">
                    <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>
                <div>
                    <el-button @click="login(form)" class="login">登录</el-button>
                    <el-button @click="goRegister()" class="register">注册</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>
<script>
 import  formValidator  from '../util/validator.js'
  export default {
    data() {
      return {
        form: {
          count: '',
          password:''
        },
        rules:{
            count:[
                { 
                    required: true, message: '请输入账号', trigger: 'blur' ,                    
                },
            ],
            password:[
                {
                    required: true, message: '请输入密码', trigger: 'blur' ,
                    // pattern:/(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
                },
            ]
        }
      }
    },
    methods: {
       login(form){
           //非空验证
            formValidator.myValidate(this.rules,form).then((e)=>{
                if(e){
                    if(e.length>1){
                        this.$message.error("请填写有*号的选项")
                    }else
                        this.$message.error(e[0].message)
                }else{
                    this.$axios.post("/User/login",form).then((res)=>{
                        let result = res.data.d
                        if(result.status == false){
                            return this.$message.error(result.message)
                        }      
                        this.$message.success(result.message);
                        //sessionStorage不能存对象             
                        this.$store.commit("userInfo",{UID:result.UID,count:form.count} )
                        sessionStorage.setItem("userInfo",JSON.stringify({UID:result.UID,count:form.count}) )
                        const date = new Date().toLocaleDateString();                     
                        sessionStorage.setItem("token",result.UID+date);
                        this.$store.commit("token",result.UID+date);                       
                        // console.log("token:"+sessionStorage.getItem("token")+"UID:"+sessionStorage.getItem("UID"))
                        // this.$axios.post("/User/loginUser",{"uid":result.uid}).then((res)=>{
                        //     console.log (res.data.d)
                        // })
                        //设置session

                        
                        //延时跳转，注意啊 这个setTimeout的名字。。。
                        // this.$axios.post('/Nav/search').then(res=>{
                        //  const result = res.data.d.L;
                        //     //同步将nav存到sessionStorage,先转化为字符串
                        //     sessionStorage.setItem('nav',JSON.stringify(result))
                        //     this.$store.commit("nav",JSON.parse(sessionStorage.getItem('nav')))   
                        // })
                        return setTimeout(()=>{
                            this.$router.push("/index")
                        },1000)       
                    })
                }
            })
       },
       goRegister(){
           this.$router.push("/register")
       }
    }
  }
</script>
<style scoped >
    .el-card{
        width:35%;
        margin:10% auto
    }
    .el-card__body{
        width:75%;
        margin:0 auto;
        
    }
    .font-left{
        text-align:left;
        font-weight:bold
    }
</style>

<style scoped>
    .font-left{
        text-align:left;
        font-weight:bold
    }
    .login{
        width: 35%;
        margin-left:22%
    }
    .register{
        width: 35%;
        margin-left:6%
    }
</style>